<template>
  <div>
    <h1 class="tit">商户概述</h1>
    <el-row class="shop">
      <el-col :xl="5" :lg="11" :md="11" :sm="24" :xs="24">
        <el-card>
          <i class="icon add"></i>
          <div>
            <h3>昨日新增店铺</h3>
            <h1>{{ shop.yesterday_stor }}</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="11" :md="11" :sm="24" :xs="24">
        <el-card>
          <i class="icon old-money"></i>
          <div>
            <h3>昨日交易金额</h3>
            <h1>{{ shop.yesterday_money }}</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="5" :lg="11" :md="11" :sm="24" :xs="24">
        <el-card>
          <i class="icon shop-num"></i>
          <div>
            <h3>店铺总数量</h3>
            <h1>{{ shop.store_count }}</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="11" :md="11" :sm="24" :xs="24">
        <el-card>
          <i class="icon omoney"></i>
          <div>
            <h3>交易总金额</h3>
            <h1>{{ shop.store_money }}</h1>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Shop',
  props: {
    shop: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
  @import './../../index.scss';
  .add {
      background: url('../../../../assets/img/add.png') no-repeat center;
  }
  .old-money {
      background: url('../../../../assets/img/old-money.png') no-repeat center;
  }
  .shop-num {
      background: url('../../../../assets/img/shop-num.png') no-repeat center;
  }
  .omoney {
      background: url('../../../../assets/img/omoney.png') no-repeat center;
  }
</style>